<template>
  <el-tabs class="drives" type="border-card">
    <el-tab-pane label="数据类型定义" class="drives-tab-pane">
      <data-type-vue v-model="dataTypes" v-if="flag"></data-type-vue>
    </el-tab-pane>
    <el-tab-pane label="配置参数定义" class="drives-tab-pane">
      <config-data-vue
        v-model="configDatas"
        :dataTypes="dataTypes"
        v-if="flag"
      ></config-data-vue>
    </el-tab-pane>
    <el-tab-pane label="底层驱动软件处理" class="drives-tab-pane">
      <lowlevel-drives-vue
        v-model="lowApiDatas"
        :dataTypes="dataTypes"
        v-if="flag"
      ></lowlevel-drives-vue>
    </el-tab-pane>
    <el-tab-pane label="高层API接口定义" class="drives-tab-pane">
      <highlevel-api-vue
        v-model="highApiDatas"
        :configDatas="configDatas"
        :dataTypes="dataTypes"
        :lowApiDatas="lowApiDatas"
        v-if="flag"
      ></highlevel-api-vue>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
import { useStore } from '@/render/store/index'
import configDataVue from './config-data/config-data.vue'
import dataTypeVue from './data-type/data-type.vue'
import highlevelApiVue from './high-api/highlevel-api.vue'
import lowlevelDrivesVue from './low-api/lowlevel-drives.vue'
import { ITabState } from '@/render/store/base/types'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    dataTypeVue,
    configDataVue,
    highlevelApiVue,
    lowlevelDrivesVue
  },
  props: {
    tab: {
      type: Object as PropType<ITabState>,
      required: true
    }
  },
  setup(props) {
    const store = useStore()
    let flag = ref(false)
    let dataTypes = ref([]),
      configDatas = ref([]),
      lowApiDatas = ref([]),
      highApiDatas = ref([])

    onMounted(() => {
      loadModuleDrives()
    })

    const update = () => {
      store
        .dispatch('drives/updateModuleDrives', {
          projectName: props.tab.projectName,
          projectModuleName: props.tab.moduleName,
          dataTypes: dataTypes.value,
          configDatas: configDatas.value,
          lowApiDatas: lowApiDatas.value,
          highApiDatas: highApiDatas.value
        })
        .then((res) => {
          ElMessage({
            message: res.message,
            type: 'success'
          })
        })
    }

    const loadModuleDrives = () => {
      const projectName = props.tab.projectName
      const projectModuleName = props.tab.moduleName
      store
        .dispatch('drives/loadModuleDrives', {
          projectName,
          projectModuleName
        })
        .then((res) => {
          flag.value = true
          dataTypes.value = res.dataTypes
          configDatas.value = res.configDatas
          lowApiDatas.value = res.lowApiDatas
          highApiDatas.value = res.highApiDatas
        })
        .catch((res) => {
          ElMessage.error(res.message)
        })
    }

    watch(
      store.state.drives.moduleDrives,
      (n) => {
        loadModuleDrives()
      },
      {
        deep: true
      }
    )
    return {
      flag,
      dataTypes,
      configDatas,
      lowApiDatas,
      highApiDatas,
      update
    }
  }
})
</script>

<style scoped>
.drives {
  margin-top: 10px;
  border-radius: 4px;
}
</style>
